<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象之烟花完善</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 700px;
            height: 500px;
            border: 1px solid red;
            background: #000;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
    
</head>
<body>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>

        // 构造函数
        function Firework(elem_selector){
            // 1.实例化
            this.box = $(elem_selector);
            
            this.bindEvent();
            this.autoplay();
        }

        // 原型对象
        Firework.prototype.bindEvent = function(){
            let self = this;
            
            // 2.改成JQ的click方法
            self.box.click(function(e,data){
                /* 
                    为下面自动播放的事件派发做准备
                        * e无论是用户触发还是自定义触发都存在
                        * data在用户触发时为undefined，在自定义触发时为对象

                        -> 即用户触发时使用e，自定义触发时使用data
                
                
                */
                var e = data || e;
                var $fw = self.createFw();
                ($fw).css({
                    left : e.offsetX
                })
                .animate({
                    top:e.offsetY
                },function(){
                    $fw.remove();
                    self.boom(e.offsetX,e.offsetY);
                });
            })
            
        }
        Firework.prototype.createFw = function(){
            let self = this;

            let $span = $('<div class="ball"></div>');
            $span.css({
                backgroundColor : '#' + Math.round(parseInt('ffffff',16) * Math.random()).toString(16).padStart(6,'0')
            })
            self.box.append($span);
            return $span
        }

        Firework.prototype.boom = function(x,y){

            var self = this;
            var deg = 0;
            var r = 100;

            for(var i=0;i<20;i++){
                var $span = self.createFw();
                $span.css({
                    left:x,
                    top:y
                })

                deg += 18;

                var target_x = Math.round(Math.cos(Math.PI/180*deg)*r);
                var target_y = Math.round(Math.sin(Math.PI/180*deg)*r);

                ($span).animate({
                    left:target_x + x,
                    top:target_y + y
                },function(){
                    this.remove(); 
                })  
            }   
        }

        Firework.prototype.autoplay = function(){
            var self = this;
            setInterval(function(){
                var data = {
                    offsetX:Math.round(Math.random()*self.box.width()),
                    offsetY:Math.round(Math.random()*self.box.height()),
                }
                /* 
                    原生JS事件直接调用，在JQ中需要使用到事件的抛发
                */
                self.box.trigger("click",[data])
            },500)
        }

        // 实例对象
        let fw = new Firework('#box');
        
    </script>
</body>
</html>